<template>
	<div class="admin-main">
		<div>
			<div>
				<img src="../../assets/img/main-3.png">
			</div>
			<div>
				<el-menu :unique-opened="true" @select="menuSelect" text-color="#fff" background-color="#222453">
					<el-menu-item index="1">
						<el-icon>
							<HomeFilled />
						</el-icon>
						<template #title>{{ $t('route.FirstPage') }}</template>
					</el-menu-item>

					<el-sub-menu index="9">
						<template #title>
							<el-icon>
								<files />
							</el-icon>
							<span>{{ $t('route.Data_Management') }}</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="9-1">{{ $t('route.Equipment_information') }}</el-menu-item>
						</el-menu-item-group>
					</el-sub-menu>

					<el-sub-menu index="8">
						<template #title>
							<el-icon>
								<video-camera />
							</el-icon>
							<span>{{ $t('route.IOT_kanban') }}</span>
						</template>
						<el-menu-item-group>
						</el-menu-item-group>
					</el-sub-menu>
					<el-sub-menu index="2">
						<template #title>
							<el-icon>
								<cpu />
							</el-icon>
							<span>{{ $t('route.DeviceManager') }}</span>
						</template>
						<el-menu-item-group>
						</el-menu-item-group>
					</el-sub-menu>

					<el-sub-menu index="3">
						<template #title>
							<el-icon>
								<help />
							</el-icon>
							<span>{{ $t('route.Maintenance_Management') }}</span>
						</template>
						<el-menu-item-group>
						</el-menu-item-group>
					</el-sub-menu>


					<el-sub-menu index="4">
						<template #title>
							<el-icon>
								<document />
							</el-icon>
							<span>{{ $t('route.Storage_Manager') }}</span>
						</template>
						<el-menu-item-group>
						</el-menu-item-group>
					</el-sub-menu>


					<el-sub-menu index="5">
						<template #title>
							<el-icon>
								<magic-stick />
							</el-icon>
							<span>{{ $t('route.Power_energy_consumption_management') }}</span>
						</template>
						<el-menu-item-group>
						</el-menu-item-group>
					</el-sub-menu>

					<el-sub-menu index="6">
						<template #title>
							<el-icon>
								<magic-stick />
							</el-icon>
							<span>{{ $t('route.Alarm_management') }}</span>
						</template>
						<el-menu-item-group>
						</el-menu-item-group>
					</el-sub-menu>
					<el-sub-menu index="7">
						<template #title>
							<el-icon>
								<expand />
							</el-icon>
							<span>{{ $t('route.Basic_Settings') }}</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="7-1">{{ $t('route.Customer') }}</el-menu-item>
							<el-menu-item index="7-2">{{ $t('route.agent') }}</el-menu-item>
							<el-menu-item index="7-3">{{ $t('route.Serial') }}</el-menu-item>
							<el-menu-item v-if="false" index="7-4">{{ $t('route.Help_dpcument') }}</el-menu-item>
							<el-menu-item index="7-7">升级程序管理</el-menu-item>
						</el-menu-item-group>
					</el-sub-menu>
				</el-menu>
			</div>
		</div>
		<div>
			<div>
				<div>当前登陆:<label aria-valuetext=""></label></div>
				<!-- <img src="../../assets/img/icon-12.png" /> -->
				<div>
					<img src="../../assets/img/main-1.png">
					<img src="../../assets/img/main-2.png">
					<img src="../../assets/img/avatar.png">
					<el-dropdown @command="handleCommand" style="margin-left: 20px;">
						<span>
							{{ $t('route.first') }}
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item command="0">{{ $t('route.USER') }}</el-dropdown-item>
								<el-dropdown-item command="1">{{ $t('route.chinese') }}</el-dropdown-item>
								<el-dropdown-item command="2">{{ $t('route.english') }}</el-dropdown-item>
								<el-dropdown-item command="3">{{ $t('route.Change_Password') }}</el-dropdown-item>
								<el-dropdown-item command="4">{{ $t('route.Sign_Out') }}</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
			</div>
			<div>
				<router-view />
			</div>
		</div>
	</div>
</template>
<script>
import md5 from '../../js/common/md5.js'


import {
	HomeFilled,
	Cpu,
	Help,
	Document,
	Timer,
	MagicStick,
	Files,
	User,
	VideoCamera,
	Expand,
	Goblet,

} from '@element-plus/icons'
export default {
	components: {
		HomeFilled,
		Cpu,
		Help,
		Document,
		Timer,
		MagicStick,
		Files,
		User,
		VideoCamera,
		Expand,
		Goblet,
	},
	data() {
		return {

		}
	},
	methods: {
		route(){this},
		handleCommand(index) {
			switch (index) {
				case '0':
					this.$router.push("/user-info");
					break;
				case '1':
					// 切换中文
					i18n.locale.value = 'zh';
					break;
				case '2':
					// 切换英文
					i18n.locale.value = 'en';
					break;
				case '3':
					this.$router.push("/admin/update-pwd");
					break;
				case '4':
					this.$router.push("/");
					break;
			}
		},
		menuSelect(index) {
			const mobile = this.$store.state.mobile;
			const password = this.$store.state.password;
			switch (index) {
				case "1":
					this.$router.push("/admin/home");
					break;
				case "9-1":
					this.$router.push("/admin/dvservice-home");
					break;
				case "2-1":
					this.$router.push("/device-list");
					break;
				case "2-2":
					this.$router.push("/lend-record");
					break;
				case "2-3":
					this.$router.push("/borrow-record");
					break;
				case "2-4":
					this.$router.push("/repair-device");
					break;
				case "2-5":
					this.$router.push("/scrap-device");
					break;
				case "3-1":
					this.$router.push("/repair-order");
					break;
				case "4-1":
					this.$router.push("/workshop-map");
					break;
				case "4-2":
					this.$router.push("/space-device");
					break;
				case "5-1":
					this.$router.push("/electric-monitor");
					break;
				case "6-1":
					this.$router.push("/alarm-news");
					break;
				case "7-1":
					this.$router.push("/admin/customer");
					break;
				case "7-2":
					this.$router.push("/admin/agent");
					break;
				case "7-3":
					this.$router.push("/admin/serial-num");
					break;
				case "7-4":
					this.$router.push("/admin/help-doc");
					break;
				case "7-5":
					this.$router.push("/admin/device-service");
					break;
				case "7-6":
					this.$router.push("/craft");
					break;
				case "7-7":
					this.$router.push("/admin/program-list");
					break;
				case "8-1":
					window.location.href =
						'http://47.114.109.247:8080/hikari-cloud-board/index.html#/pages/monitor/monitor-8?isLogin=0&mobile=' +
						mobile +
						'&password=' + md5(password);
					break;
				case "8-2":
					window.location.href =
						'http://47.114.109.247:8080/hikari-cloud-board/index.html#/pages/monitor/monitor-12?isLogin=0&mobile=' +
						mobile +
						'&password=' + md5(password);
					break;

			}
			console.log(index)
		},
	}
};
</script>
<style lang="scss" scoped>
.admin-main {
	height: 100vh;
	background-color: #eeeeee;
	display: flex;
	flex-direction: row;

	>div:nth-of-type(1) {
		min-width: 200px;
		background-color: #222453;
		overflow: auto;

		>div:nth-of-type(1) {
			width: 100%;
			text-align: center;
			margin-top: 30px;

			>img {
				width: 150px;
				height: 31px;
			}
		}

		>div:nth-of-type(2) {
			width: 201px;
			margin-top: 40px;
		}

	}

	>div:nth-of-type(2) {
		flex: 1;
		padding-left: 20px;


		>div:nth-of-type(1) {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			padding: 10px 20px;

			>img:nth-of-type(1) {
				width: 800px;
				height: 38px;
			}

			>div:nth-of-type(2) {
				display: flex;
				justify-content: center;
				align-items: center;

				>img:nth-of-type(1),
				>img:nth-of-type(2) {
					width: 30px;
					height: 30px;
					margin-left: 20px;
				}

				>img:nth-of-type(3) {
					width: 70px;
					height: 70px;
					margin-left: 20px;
				}
			}

		}


	}
}
</style>
